import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import { observer, inject } from "mobx-react";
@inject("sheetStore")
@observer
class GxlTableRowCell extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: false,
      height: "1.5rem",
      width: "5rem",
      fontSize: "1rem",
      rect: { left: 0, top: 0 }
    };
  }
  componentDidMount() {
    const thisDom = ReactDOM.findDOMNode(this)
    var rect = thisDom.getBoundingClientRect();
    this.setState({
      rect:{left:rect.left,top:rect.top,width:rect.width,height:rect.height,offsetLeft:thisDom.offsetLeft,offsetTop:thisDom.offsetTop}
    });
  }
  selectCell() {
    const { sheetStore,row,cell } = this.props;
    const { rect } = this.state;
    const selectRect = {...rect,row,cell}
    sheetStore.selectedRects= [selectRect]
    console.log(sheetStore)
  }
  render() {
    const { height, width, rect, fontSize } = this.state;
    const { rowLeft, rowTop, cell, sheet, row, sheetStore } = this.props;
    const { left, top } = rect
    const currentSheet = sheetStore.getCurrentSheet();
    const style = { height, minHeight: height, minWidth: width, fontSize };
    if (currentSheet.fixedCellIndex && cell <= currentSheet.fixedCellIndex) {
      style.position = "sticky";
      style.left = left - (rowLeft || 0);
      style.top = top;
      style.zIndex = 2;
      if (cell == currentSheet.fixedCellIndex) {
        style.boxShadow = "1px 0px 0px 0px #999"
      }
    }

    return (
      <div
        className="gxl-table-row-cell"
        onClick={() => {this.selectCell()}}
        style={style}
        sheet={sheet}
        cell={cell}
        row={row}
      ></div>
    );
  }
}
export default GxlTableRowCell;
